import * as d3 from "d3";

import store from '../store/index.js'
import { dataSave } from './data.js'

//添加的图形数据应有不重复的随机ID
function GenNonDuplicateID() {
    return Number(Math.random().toString().substr(3, 5) + Date.now()).toString(36)
}

function st() {
    const targets = store.state.targets
    const svg = store.state.svg
    return { svg, targets }
}

function drawSvg(geo, id) {
    const { svg } = st()
    svg
        .style("background-color", geo.bg)
        .attr("width", geo.size.w)
        .attr("height", geo.size.h);
}

function drawRect(geo, id) {
    const { svg, targets } = st()
    svg
        .append("rect")
        .attr("x", geo.x)
        .attr("y", geo.y)
        .attr("width", geo.width)
        .attr("height", geo.height)
        .attr("fill", geo.fill)
        .attr("stroke", geo.stroke)
        .attr("stroke-width", geo.strokeWidth)
        .on("click", function (d, i) {
            let target = d3.select(this);
            target.id = id
            target.style("filter", "url(#svgGrayscale)");
            targets.push(target);
        });
}



function drawLine(geo, id) {
    const { svg, targets } = st()
    svg
        .append("line")
        .attr("x1", geo.x1)
        .attr("y1", geo.y1)
        .attr("x2", geo.x2)
        .attr("y2", geo.y2)
        .attr("stroke", geo.stroke)
        .attr("stroke-width", geo.strokeWidth)
        .on("click", function (d, i) {
            let target = d3.select(this);
            target.id = id
            // target.style("filter", "url(#svgGrayscale)");
            targets.push(target);
        });
}

function drawText(geo, id) {
    const { svg, targets } = st()
    svg.append('text')
        .attr("x", geo.x)
        .attr("y", geo.y)
        .attr("fill", geo.fill)
        .attr('font-size', geo.fontSize)
        .text(geo.text)
        .on("click", function (d, i) {
            let target = d3.select(this);
            target.id = id
            target.style("color", "#95a5a6");
            targets.push(target);
        });
}

function drawCircle(geo, id) {
    const { svg, targets } = st()
    svg.append('circle')
        .attr("cx", geo.cx)
        .attr("cy", geo.cy)
        .attr('r', geo.r)
        .attr("fill", geo.fill)
        .attr('stroke', geo.stroke)
        .attr('stroke-width', geo.strokeWidth)
        .on("click", function (d, i) {
            let target = d3.select(this);
            target.id = id
            target.style("filter", "url(#svgGrayscale)");
            targets.push(target);
        });
}

function drawPolygon(geo, id) {
    const { svg, targets } = st()
    svg.append('polygon')
        .attr("points", geo.points)
        .attr("fill", geo.fill)
        .attr('stroke', geo.stroke)
        .attr('stroke-width', geo.strokeWidth)
        .on("click", function (d, i) {
            let target = d3.select(this);
            target.id = id
            target.style("filter", "url(#svgGrayscale)");
            targets.push(target);
        });
}

function drawPolyline(geo, id) {
    const { svg, targets } = st()
    svg.append('polyline')
        .attr("points", geo.points)
        .attr("fill", 'none')
        .attr('stroke', geo.stroke)
        .attr('stroke-width', geo.strokeWidth)
        .on("click", function (d, i) {
            let target = d3.select(this);
            target.id = id
            target.style("filter", "url(#svgGrayscale)");
            targets.push(target);
        });
}

function drawEllipse(geo, id) {
    const { svg, targets } = st()
    svg.append('ellipse')
        .attr("cx", geo.cx)
        .attr("cy", geo.cy)
        .attr('rx', geo.rx)
        .attr('ry', geo.ry)
        .attr("fill", geo.fill)
        .attr('stroke', geo.stroke)
        .attr('stroke-width', geo.strokeWidth)
        .on("click", function (d, i) {
            let target = d3.select(this);
            target.id = id
            target.style("filter", "url(#svgGrayscale)");
            targets.push(target);
        });
}

export function svgDrawUpdate(geo) {
    drawSvg(geo)
    const svg = store.state.svgData[0].geo
    svg.bg = geo.bg
    svg.size = geo.size
}

export function rectDrawAdd(geo, id = '') {
    if (id == '') {
        id = GenNonDuplicateID()
    }
    drawRect(geo, id)
    dataSave('rect', geo, id)
}

export function lineDrawAdd(geo, id = '') {
    if (id == '') {
        id = GenNonDuplicateID()
    }
    drawLine(geo, id)
    dataSave('line', geo, id)
}
export function lineLabelDrawAdd(geo, id1 = '', id2 = '') {
    if (id1 == '') {
        id1 = GenNonDuplicateID()
    }
    if (id2 == '') {
        id2 = GenNonDuplicateID()
    }
    drawLine(geo, id1)
    let x = (geo.x1 + geo.x2) / 2
    let y = (geo.y1 + geo.y2) / 2
    let geo2 = {
        x,
        y,
        fill: geo.stroke,
        'fontSize': 12,
        text: geo.text,
    }
    drawText(geo2, id2)
    dataSave('line', geo, id1)
    dataSave('text', geo2, id2)
}
export function textDrawAdd(geo, id = '') {
    if (id == '') {
        id = GenNonDuplicateID()
    }
    drawText(geo, id)
    dataSave('text', geo, id)
}

export function circleDrawAdd(geo, id = '') {
    if (id == '') {
        id = GenNonDuplicateID()
    }
    drawCircle(geo, id)
    dataSave('circle', geo, id)
}

export function polygonDrawAdd(geo, id = '') {
    if (id == '') {
        id = GenNonDuplicateID()
    }
    drawPolygon(geo, id)
    dataSave('polygon', geo, id)
}

export function polylineDrawAdd(geo, id = '') {
    if (id == '') {
        id = GenNonDuplicateID()
    }
    drawPolyline(geo, id)
    dataSave('polyline', geo, id)
}
export function ellipseDrawAdd(geo, id = '') {
    if (id == '') {
        id = GenNonDuplicateID()
    }
    drawEllipse(geo, id)
    dataSave('ellipse', geo, id)
}